<!DOCTYPE html>
<html>

<head>
    <style type="text/css">
        .container {
            width: 100%;
        }

        .progressbar {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 500px;
            counter-reset: step;
        }

        .progressbar li {
            list-style-type: none;
            float: left;
            width: 33.33%;
            text-align: center;
            position: relative;
        }

        .progressbar li:before {
            content: counter(step);
            counter-increment: step;
            width: 30px;
            height: 30px;
            border: 1px solid #ddd;
            display: block;
            text-align: center;
            margin: 0 auto 0 auto;
            border-radius: 50%;
            line-height: 30px;
            background-color: white;
        }

        .progressbar li:after {
            content: '';
            position: absolute;
            width: 100%;
            height: 1px;
            background-color: #ddd;
            top: 15px;
            left: -50%;
            z-index: -1;
        }

        .progressbar li:first-child:after {
            content: none;
        }

        .progressbar li.active {
            color: green;
        }

        .progressbar li.active:before {
            border-color: green
        }

        .progressbar li.active + li:after {
            background-color: green;
        }
    </style>

</head>

<body>
    <div class="container">
        <ul class="progressbar">
            <li class="active">step 1</li>
            <li>step 2</li>
            <li>step 3</li>
        </ul>
    </div>

</body>

</html>